<template>
    <h2>{{ person.name }} {{ person.age }} {{ person.city }}</h2>
    <h1>{{ name }} {{age }} {{ city }}</h1>
</template>
<script setup>
    import { toRefs,reactive } from 'vue' 
    const person = reactive({
        name: 'John',
        age: 25,
        city: 'New York'
    })
    // const personRefs = toRefs(person)
    const { name, age, city } = toRefs(person)

    setTimeout(() => {
        // personRefs.name = 'Jane',
        // personRefs.age = 30,
        // personRefs.city = '南昌'
        name.value = 'Jane'
        age.value = 30
        city.value = '南昌'
    }, 3000);
</script>
<style scoped>

</style>